.monthly-contarnier {
  //   margin-bottom: 121px;
  width: 100%;
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  background: #fff;
  z-index: 1;
  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 20.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      0deg,
      #f4f5fa 0%,
      #b5cdfe 12%,
      #0065ee 35%,
      #2175ff 100%
    );
    border-radius: 0rem 0rem 1.875rem 1.875rem;
    > div:nth-of-type(1) {
      color: #fff;
      font-size: 2.5rem;
      font-weight: bold;
      position: absolute;
      top: 3.5rem;
      left: 50%;
      width: 100%;
      transform: translateX(-50%);
    }
    .monthly_change {
      position: absolute;
      right: 2%;
      top: 3.5rem;
      svg {
        font-size: 2rem;
      }
    }
  }
  .monthly-box {
    width: 100%;
    height: 87vh;
    position: relative;
    z-index: 2;
    margin-top: 13vh;
    background: #ffffff;
    border-radius: 1rem;
    padding: 3.125rem 1.875rem 0 1.875rem;

    &-top {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;

      &-card {
        width: 48%;
        height: 9.125rem;
        background: linear-gradient(90deg, #fafcff 0%, #f6f8fe 100%);
        border-radius: 0.875rem;
        font-weight: 500;
        font-size: 2rem;
        color: #323232;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-left: 1.625rem;

        > div {
          width: 100%;
        }
      }
    }
    &-title {
      margin: 1.25rem 0;
      font-size: 2.25rem;
      padding-left: 1.625rem;
      font-weight: 500;
    }
    &-card {
      position: relative;
      width: 100%;
      height: 11.125rem;
      background: linear-gradient(90deg, #fafcff 0%, #f6f8fe 100%);
      border-radius: 0.875rem;
      padding: 1.625rem 2.125rem 1.875rem 1.625rem;
      margin-bottom: 1.25rem;
      &-title {
        font-size: 1.875rem;
        color: #161a1e;
      }
      &-type {
        font-size: 1.25rem;
        color: #ffffff;
        margin: 1.25rem 0;
        span {
          margin-right: 1rem;
        }
        span:nth-child(1) {
          display: inline-block;
          width: 6.625rem;
          height: 1.8125rem;
          background: #19bc56;
          border-radius: 0.3125rem;
          line-height: 1.8125rem;
          text-align: center;
        }
        span:nth-child(2) {
          display: inline-block;
          width: 6.625rem;
          height: 1.8125rem;
          background: #ff6200;
          border-radius: 0.3125rem;
          line-height: 1.8125rem;
          text-align: center;
        }
      }
      &-time {
        font-size: 1.5rem;
        color: #787e93;
      }
      > div:last-child {
        position: absolute;
        top: 0;
        right: 3.5rem;
        width: 9.625rem;
        height: 2.875rem;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 2.875rem;
        font-size: 1.75rem;
        color: #ffffff;
      }
      .ycl {
        background-image: url("../../../images/user/ycl.png");
      }
      .ysl {
        background-image: url("../../../images/user/ysl.png");
      }
      .dcl {
        background-image: url("../../../images/user/dcl.png");
      }
    }
  }
}
